$(function () {
    // 4.分类数据的动态渲染
    // 所有文章类别接口
    // 请求地址：/admin/category/list
    // 请求方式：get
    // 请求参数：无
    // 4.1 发送ajax请求  
    function init() {
        $.ajax({
            // url: 'http://localhost:8080/api/v1/admin/category/list',
            url: bignew.category_list,
            dataType: 'json',
            // headers: {
            //     Authorization: localStorage.getItem('bignews_token_9')
            // },
            success: function (res) {
                // console.log(res);
                let renderResult = template('cataTemp', res);
                $('tbody').html(renderResult);
            },
            // error: function (err) {
            //     console.log(err);
            //     if (err.statusText === "Forbidden") {
            //         alert('未登录，请先登录');
            //         location.href = './login.html';
            //     }
            // }
        })
    }
    init();
    // 4.2 article_category.html页面中 使用模板引擎 渲染数据


    // 6.1 点击新增分类按钮 弹出新增模态框
    $('#xinzengfenlei').on('click', function () {
        $('#myModal').modal('show')
        $('.modal-title').text('新增分类')
        $('.btnopt').text('新增')
        // 受编辑影响--设置空
        $('#name').val('');
        $('#slug').val('');
    })

    //6.2 实现新增分类的操作
    $('.btnopt').on('click', function () {
        //跟编辑使用同一个模态框，需要判断进行 新增还是编辑
        if ($(this).text() == '新增') {
            // 请求地址：/admin/category/add
            // 请求方式：post
            // 请求参数：name  slug
            // console.log($('form').serialize());
            $.ajax({
                type: 'post',
                url: bignew.category_add,
                data: $('form').serialize(),
                dataType: 'json',
                success: function (res) {
                    // console.log(res);
                    if (res.code === 201) {
                        alert(res.msg);
                        // location.href = './article_category.html'
                        init();   //调用刷新数据列表
                    }
                }
            })

            // 点击后进行隐藏--bs官网/js插件/方法
            $('#myModal').modal('hide')
        }
    })

    //6.3 实现编辑分类操作
    // 新增完成后 才有编辑按钮 ，进行编辑操作-使用委托事件
    $('tbody').on('click', '.btnedit', function () {
        console.log($('.btnopt').text);
        //1)弹出模态框，使用 跟新增一样的模态框,但是要改文字，'新增'代码段也要改
        $('#myModal').modal('show')
        //修改模态框文字
        $('.modal-title').text('编辑分类')
        $('.btnopt').text('编辑')

        //2)获取输入框内默认的文本数据-显示
        // 获取数据，数据是通过自定义属性的方式进行存储的
        // js原生：dom.dataset[key]  dom.dataset.key
        // jq：$().data().key 或者 $().data('key')
        // $().data():可以获取当前元素中所有data-开头的自定义属性值，以对象的方式返回
        console.log($(this).data());
        let obj = $(this).data();
        $('#name').val(obj.name);
        $('#slug').val(obj.slug);
        //注意，此时点击新增分类按钮，会有默认显示文本数据，需设置空
        // 将id存储在某个  以后取值方便的 位置 (按钮的位置)
        $('.btnopt').attr('id', obj.id)
    })


    // 3）实现编辑功能
    // 按钮要进行判断，是创建还是编辑操作
    $('.btnopt').on('click', function () {
        // 获取id值
        let id = $(this).attr('id')
        if ($(this).text() == '编辑') {
            //获取数据+发送请求
            // 请求地址：/admin/category/edit
            // 请求方式：post
            // 请求参数：id name slug
            $.ajax({
                type: 'post',
                url: bignew.category_edit,
                data: $('form').serialize() + "&id=" + id,
                dataType: 'json',
                success: function (res) {
                    if (res.code == 200) {
                        alert(res.msg);
                        $('#myModal').modal('hide')
                        init();
                    }
                }
            })
        }
    })

})